<template>
  <div class="article">
    <div class="article_title">
      <p style="margin-right: 20px">文章列表</p>
    </div>
    <div class="article_body">
      <div v-if="!loading" class="article_body_content">
        <div class="article_list" v-for="item in topiclist" :key="item.id">
          <div class="article_list_title">
            <div>
              {{ item.title }}
            </div>
            <div v-if="isUser" @click="getLogin" class="all">
              登录查看 <i class="el-icon-arrow-down"></i>
            </div>
            <div v-else @click="handelForum(item)" class="all">
              阅读全文 <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="article_list_describe">
            <!-- <div class="article_list_img">
              <img v-if="item.url" :src="item.url" alt="" />
            </div> -->
            <!-- <div :style="item.url ? 'marginLeft:12px' : ''">
              {{ item.content }}
              <span v-html="item.content.length > 150?'...':'item.content'">...</span>
            </div> -->
          </div>
          <div class="article_list_option">
            <div class="article_list_option_button" @click="handelForum(item)">
              <i class="el-icon-chat-dot-square"></i>评论{{ item.nums || 0 }}
            </div>
            <div class="article_list_option_button">
              <i class="el-icon-star-on"></i>喜欢{{ item.likeQuantity || 0 }}
            </div>
            <div class="article_list_option_button">
              <i class="el-icon-s-flag"></i>收藏{{
                item.favouriteQuantity || 0
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="loading-box" v-else>
        加载中 <i class="el-icon-loading"></i>
      </div>
      <div class="my_like">
        <div class="my_collect">
          <p><i class="el-icon-star-on" style="color: #ffa200"></i> 我的收藏</p>
          <p style="margin-right: 10px">{{ countData.favouriteCount || 0 }}</p>
        </div>
        <div class="my_collect">
          <p><i class="el-icon-s-flag" style="color: #fd5545"></i> 我的喜欢</p>
          <p style="margin-right: 10px">{{ countData.likeCount || 0 }}</p>
        </div>
        <div class="write_an_article">
          <el-button
            icon="el-icon-edit"
            type="success"
            @click="getLogin"
            v-if="isUser"
            >请登陆</el-button
          >

          <el-button
            icon="el-icon-edit"
            type="success"
            @click="writeArticle"
            v-else
            >写文章</el-button
          >
        </div>
      </div>
    </div>
    <div v-show="!loading && total > 0" class="forum_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="topicData.page"
        :page-size="topicData.size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div
      style="color: #808080; text-align: center"
      v-if="!loading && total === 0"
    >
      没有找到相关文章
    </div>
  </div>
</template>

<script>
import { getTopicList, getTopicCount } from "@/api/topic";
import { getCookie } from "@/utils/auth";
export default {
  name: "topic",
  props: ["topicType"],
  data() {
    return {
      isUser: true, // true是未登录
      loading: false,
      topicData: {
        page: 1,
        size: 10,
        data: {
          subject: "",
          keyword: "",
        },
      },
      total: 0,
      topiclist: [],
      countData: {
        favouriteCount: 0,
        likeCount: 0,
      },
    };
  },
  watch: {
    topicType(newVal, oldVal) {
      let _this = this;
      _this.topicData.data.subject = newVal;
      _this.getTopicLists(_this.topicData);
    },
  },
  created() {
    this.isUser = !getCookie("username");
  },
  mounted() {
    this.topicData.data.type = this.$route.query.type || "";
    this.getTopicLists(this.topicData);
    if (this.isUser === false) {
      this.getTopicCount();
    }
  },
  methods: {
    getLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    getTopicCount() {
      getTopicCount().then((response) => {
        this.countData = response.data.results;
      });
    },
    getTopicLists(data) {
      this.loading = true;
      getTopicList(data)
        .then((response) => {
          if (response.data.code === 20000) {
            const { list, totalRecords } = response.data.results;
            this.total = totalRecords;
            this.topiclist = list;
            this.loading = false;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleCurrentChange(val) {
      this.topicData.page = val;
      this.getTopicLists(this.topicData);
    },
    handelForum(item) {
      this.$router.push({
        path: "/forum/forumContent",
        query: {
          routerName: "文章详情",
          id: item.id,
        },
      });
    },
    writeArticle() {
      this.$router.push({
        path: "/forum/writeArticle",
        query: {
          routerName: "写文章",
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.article {
  .write_an_article {
    .el-button {
      width: 100%;
      background-color: #0a7b19;
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.article {
  color: #333;
  margin-bottom: 50px;

  .article_title {
    height: 40px;
    background: #f1f1f1;
    text-align: right;
    line-height: 40px;
    font-weight: bold;
    font-size: 21px;
    color: #0a7b19;
  }

  .article_body {
    display: flex;
    justify-content: space-between;

    .article_body_content {
      width: 75%;
    }

    .article_list {
      border-bottom: 1px solid #f1f1f1;
      padding: 20px 0;
      cursor: pointer;

      .article_list_title {
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;

        .all {
          font-size: 14px;
          color: #0a607b;
        }
      }

      .article_list_describe {
        display: flex;
        margin-top: 11px;
        line-height: 20px;

        .article_list_img {
          img {
            width: 190px;
            height: 105px;
          }
        }

        &:hover {
          color: #0a7b19;
        }
      }

      .article_list_option {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        color: #808080;

        .article_list_option_button {
          margin-right: 20px;
        }
      }
    }

    .my_like {
      width: 20%;
      color: #808080;
      font-size: 16px;
      padding: 20px 0;

      .my_collect {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
    }
  }

  .forum_pagination {
    width: 900px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    margin-bottom: 80px;

    .forum_pagination_button {
      width: 86px;
      height: 38px;
      line-height: 38px;
      border: 1px solid #0a7b19;
      border-radius: 8px;
      color: #0a7b19;
      font-weight: bold;
      text-align: center;
      transition: all 0.2s linear;
      cursor: pointer;

      &:hover {
        background-color: #0a7b19;
        color: white;
      }
    }
  }
  .loading-box {
    text-align: center;
    margin-top: 80px;
    flex: 1;
  }
}
</style>
